<template>
  <div>
    <CommonHead></CommonHead>
    <div class="personal personal-data">
      <div class="personal-banner">
        <img src="@/assets/img/15.jpg" alt="" class="w100" />
      </div>
      <div class="con">
        <div class="clearfix">
          <PersonalLeft></PersonalLeft>
          <div class="fr personal-re">
            <ul class="personal-re-ul">
              <li class="active">
                <a @click="$router.push('/personal')">创作（22） </a>
              </li>
              <li>
                <a class="collect" @click="$router.push('/collect')">收藏（22） </a>
              </li>
              <li>
                <a href=""> 动态（22） </a>
              </li>
              <li>
                <a href="">资料 </a>
              </li>
              <li>
                <a href="">更换主题</a>
              </li>
            </ul>
            <div class="personal-re-cons">
              <p class="personal-re-p">资料</p>
            </div>
            <div class="means">
              <div class="sculpture-le">
                <div class="sculpture-img ta">
                  <div class="tou-img pr" @click="show()">
                    <img :src="imgUrl" alt="" />
                    <div class="pa tou-xiugai">修改头像</div>
                  </div>
                  <div class="xingming-d">
                    <p class="surname">{{ userInfo.name }}</p>
                  </div>
                </div>
                <div class="essential">
                  <p class="essential-p">基本信息</p>
                  <ul class="essential-ul">
                    <li class="clearfix">
                      <span class="fl le-span"> 手机号 </span>
                      <div class="fr re-div">
                        {{ userInfo.mobile }} <a @click="this.$router.push('/passcheck')">修改</a> <span class="bz-span">
                          仅自己可见</span>
                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 邮箱 </span>
                      <div class="fr re-div">
                        {{ userInfo.email }} <a @click="this.$router.push('/passcheck')">修改</a>
                        <span class="bz-span"> 仅自己可见</span>
                      </div>
                    </li>
                    <li class="clearfix sexual-li">
                      <span class="fl le-span"> 性别 </span>
                      <el-radio v-model="selectGender" label="1" checked>男</el-radio>
                      <el-radio v-model="selectGender" label="2">女</el-radio>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 家乡 </span>
                      <div class="fr re-div">
                        <el-select v-model="value" placeholder="请选择">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>

                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 现居 </span>
                      <div class="fr re-div">
                        <el-select v-model="value" placeholder="苏州">
                          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
                        </el-select>
                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 职业 </span>
                      <div class="fr re-div">
                        <el-select v-model="jobsText" placeholder="平面设计师" @change="handleJobs(jobsText)">
                          <el-option v-for="item in jobs" :key="item.id" :label="item.label" :value="item.label" />
                        </el-select>
                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 生日 </span>
                      <div class="fr re-div">

                        <div class="block">

                          <el-date-picker v-model="dateText" type="date" placeholder="选择日期"
                            @change="handleDate(dateText)">
                          </el-date-picker>
                        </div>

                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 签名 </span>
                      <div class="fr re-div">
                        <el-input v-model="signText" placeholder="不超过20个汉字或40个字符" />
                      </div>
                    </li>
                    <li class="clearfix">
                      <span class="fl le-span"> 简介 </span>
                      <div class="fr re-div">
                        <textarea v-model="pofileText"> </textarea>
                      </div>
                    </li>
                    <li>
                      <div class="overall-btn tr">
                        <a>保存</a>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="essential essential-info">
                  <p class="essential-p">身份认证信息</p>
                  <div class="clearfix">
                    <ul class="essential-ul fl">
                      <li class="clearfix">
                        <span class="fl le-span"> 姓名 </span>
                        <div class="fr re-div">
                          <el-input v-model="nameText" placeholder="填写您真实姓名" />
                        </div>
                      </li>
                      <li class="clearfix">
                        <span class="fl le-span"> 身份证 </span>
                        <div class="fr re-div clearfix">
                          <el-input v-model="idCardText" placeholder="填写您真实身份证号" class="fl" />
                          <span class="wz-rz fl">请填写15位一代身份证号或18位二代身份证号，同一个身份证号只能绑定一个uimall账号</span>
                        </div>
                      </li>
                    </ul>
                    <div class="overall-btn tr fr">
                      <a @click="handleNameSave">保存</a>
                    </div>
                  </div>
                </div>
                <div class="essential essential-info">
                  <p class="essential-p">教育背景</p>
                  <div class="clearfix">
                    <ul class="essential-ul fl">
                      <li class="clearfix">
                        <span class="fl le-span">学校 </span>
                        <div class="fr re-div">
                          <el-input placeholder="填写您毕业的院校" v-model="schoolText" />
                        </div>
                      </li>
                    </ul>
                    <div class="overall-btn tr fr">
                      <a @click="handleSchoolSave">保存</a>
                    </div>
                  </div>
                </div>
                <div class="essential essential-info">
                  <p class="essential-p">喜欢的网站</p>
                  <div class="clearfix">
                    <ul class="essential-ul fl">
                      <li class="clearfix">
                        <span class="fl le-span">网址 </span>
                        <div class="fr re-div">
                          <el-input placeholder="输入您喜欢的网址" v-model="likeWeb" />
                        </div>
                      </li>
                    </ul>
                    <div class="overall-btn tr fr">
                      <a @click="handleLikeWeb" ref="likeWebInput">新增</a>
                    </div>
                  </div>
                </div>
                <div class="essential essential-info">
                  <p class="essential-p">联系方式</p>
                  <div class="clearfix">
                    <ul class="essential-ul fl">
                      <li class="clearfix">
                        <span class="fl le-span">手机 </span>
                        <div class="fr re-div">
                          <el-input placeholder="" class="" v-model="phoneText" />
                          <el-select v-model="phoneAll" placeholder="所有人可见" class="ml25">
                            <el-option v-for="item in allPeople" :key="item.id" :label="item.label" :value="item.label" />
                          </el-select>
                        </div>
                      </li>
                      <li class="clearfix">
                        <span class="fl le-span">微信 </span>
                        <div class="fr re-div">
                          <el-input placeholder="" v-model="wxText" />
                          <el-select v-model="wxAll" placeholder="所有人可见" class="ml25">
                            <el-option v-for="item in allPeople" :key="item.id" :label="item.label" :value="item.label" />
                          </el-select>
                        </div>
                      </li>
                    </ul>
                    <div class="overall-btn tr fr">
                      <a>保存</a>
                    </div>
                  </div>
                </div>
                <div class="essential essential-info">
                  <p class="essential-p">联系方式</p>
                  <div class="clearfix">
                    <ul class="essential-ul fl">
                      <li class="clearfix">
                        <span class="fl le-span"> 主页 </span>
                        <div class="fr re-div">
                          <a href="javascript:;" @click="showrealm1">设置个性域名</a>
                        </div>
                      </li>
                      <li class="clearfix">
                        <span class="fl le-span">新浪 </span>
                        <div class="fr re-div">
                          <el-input placeholder="" />
                        </div>
                      </li>
                      <li class="clearfix">
                        <span class="fl le-span">站酷 </span>
                        <div class="fr re-div">
                          <el-input placeholder="" />
                          <div class="geng-a">
                            <a>更多</a>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="overall-btn tr fr">
                      <a>保存</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
    <!-- 弹出修改头像-->
    <div class="tanchu-box" v-if="showDetail">
      <div class="modify-avatar">
        <div class="colse pa" @click="hide">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">修改头像</p>
        <div class="clearfix">
          <div class="fl modify-left">
            <div class="shang-box">
              <img src="@/assets/img/3.png" class="img-bj w100" alt="" />
              <div class="hsnag">
                <!-- <img src="@/assets/img/jia.png" alt="" /> -->
                <upload></upload>
                <p class="p1">请上传头像</p>
                <p class="p2">支持jpg/gif/png格式 <br />最佳尺寸200*200px</p>
              </div>
              <el-upload class="upload-demo" drag action="//run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple>
              </el-upload>
            </div>
            <div class="clearfix upload-box">
              <div class="re-upload fl">
                <a>重新上传</a>
              </div>
              <div class="fr caijiao">
                <button>-</button>
                <button>+</button>
              </div>
            </div>
          </div>
          <div class="fr modify-re">
            <div class="youlan-timg">
              <img src="@/assets/img/2.png" alt="" />
            </div>
            <p class="p1">头像预览</p>
            <p class="p2">审核通过后展示</p>
          </div>
        </div>
        <div class="overall-btn ta">
          <a>保存</a>
          <a>取消</a>
        </div>
      </div>
    </div>
    <!-- 弹出个性化域名-->
    <div class="tanchu-box" v-if="showrealm">
      <div class="modify-avatar">
        <div class="colse pa" @click="hiderealm">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">设置个性域名</p>
        <div class="realm-box">
          <div class="realm-miao">
            域名一旦设置，不可更改
            <br />域名不得设置于自己不相关的企业域名一致，平台保持回收权
          </div>
          <div class="realm-input clearfix">
            <span class="fl"> Https:// </span>
            <div class="fl">
              <input type="text" name="" id="" placeholder="超过16个英文/数字" />
            </div>
            <span class="fl">.uimall.cn</span>
          </div>
        </div>
        <div class="overall-btn ta">
          <a>保存</a>
          <a>取消</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script  >

import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
import * as api from "@/api/users"

import upload from "@/components/Upload/index.vue"
// import myDistrict from 'my-district'




const value1 = ref('2023-02-03')
export default {
  components: {
    upload,
    // myDistrict
  },
  data() {
    return {
      value: '',
      options: [
        {
          value: '北京',
          label: '北京'
        },
        {
          value: '上海',
          label: '上海'
        },
        {
          value: '广州',
          label: '广州'
        },

      ],

      // 所有人可见
      allPeople: [
        {
          id: 1,
          label: '所有人可见'
        }, {
          id: 2,
          label: '仅自己可见'
        }
      ],

      jobs: [
        {
          id: 1,
          label: '平面设计师'
        },
        {
          id: 2,
          label: 'UI设计师'
        },
        {
          id: 3,
          label: 'web前端'
        }
      ],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },


      showDetail: false,
      showrealm: false,
      // 图片网址
      imgPath: 'https://ui-mall.oss-accelerate.aliyuncs.com/',
      // 图片路径
      imgName: "",

      // 用户信息
      userInfo: "",

      // 时间双向绑定
      dateText: '',

      // 签名双向绑定
      signText: '',

      // 简介双向绑定
      pofileText: '',


      // 时间戳
      stamp: '',


      // 性别
      selectGender: '1',



      // 姓名双向绑定
      nameText: "",

      // 身份证双向绑定
      idCardText: "",


      // 学校双向绑定
      schoolText: "",

      // 喜欢的网站
      likeWeb: "",

      jobsText: '',

      phoneAll: '',
      wxAll: '',
      
      // 手机双向绑定
      phoneText:'',

      // 微信双向绑定
      wxText:'',

      edit: {
        "name": "zhangsan1",
        "avatar": "images/20230421/513d27ba4dae90a491496aa93d36baff.jpeg",
        "email": "11@qq.com",
        "mobile": "18000000001",
        "sex": 1,
        "hometown": "",
        "livenow": "苏州",
        "profession": "UI设计师",
        "birthday": "",
        "bio": "",
        "introduction": "",
        "type": 1,
        "userinfo": {
          "name": "cccc",
          "idcard": "11",
          "school": "清华大学",
          "like_websites": "1,2,3",
          "contact_phone": "18888888888",
          "contact_phone_visible": 1,
          "contact_wx": "wx_123123",
          "contact_wx_visible": 0,
          "personal_domian": "1"
        },
        "user_social_account": {
          "id": 2,
          "weibo": "weibo1",
          "zhanku": "zhanku1",
          "figma": "figma1",
          "github": "github1"
        }
      }
    }
  },
  created() {
    this.getUserInfo()

  },
  methods: {
    // 请求用户信息
    async getUserInfo() {
      try {
        let res = await api.UserInfoAPi()
        this.userInfo = res.data.data
        // console.log(this.userInfo,'用户信息');
        this.imgName = res.data.data.avatar
      } catch (e) {
        console.log(e);
      }
    },




    async show() {
      this.showDetail = true
    },
    async hide() {
      this.showDetail = false
    },
    async showrealm1() {
      this.showrealm = true
    },
    async hiderealm() {
      this.showrealm = false
    },

    // 选择时间
    handleDate(e) {
      // console.log(e);
      const timestamp = e.getTime();
      console.log(timestamp);

      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const dateString = `${year}-${month}-${day} `;
      console.log(dateString);

    },


    // 编辑用户信息接口
    async getUserEdit() {
      try {
        let res = await api.userEditApi(
          this.edit
        )
        // console.log(this.edit.userinfo.school);
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    handleJobs(msg) {
      console.log(msg);
    },

    // 身份认证信息保存
    handleNameSave() {
      console.log(this.nameText, this.idCardText);
      this.edit.userinfo.name = this.nameText
      this.edit.userinfo.idcard = this.idCardText
      this.getUserEdit()
      alert('保存成功')
    },


    // 学校保存
    handleSchoolSave() {
      // console.log(this.schoolText);
      this.edit.userinfo.school = this.schoolText
      this.getUserEdit()
      alert('保存成功')
      // console.log(this.edit.userinfo.school)
    },

    //  喜欢的网站新增
    handleLikeWeb() {
      // console.log(this.edit.userinfo.like_websites);
      this.edit.userinfo.like_websites += ` ,${this.likeWeb}`
      this.getUserEdit()
      // this.likeWeb = ''
      alert('保存成功')
      console.log(this.likeWeb);

    },






  },
  computed: {
    imgUrl() {
      return this.imgPath + this.imgName
    }
  }
}
</script>
 
<style scoped lang="less">
.collect {
  cursor: pointer;
  text-decoration: none;
}
</style>